<template>
  <div>
    <el-collapse-transition>
      <div>
        <!--顶部-->
        <div class="top">
          <div class="app-main-top-box">
            <div class="title">报名活动详情
            </div>
            <el-button type="info" plain @click="downExcel">
              导出记录
            </el-button>
          </div>
          <el-col :span="8">
            <el-card shadow="always">
              <p><i class="el-icon-warning" /> 自定义表单说明</p><br>
              <span>
                1、按照表单的字段展示对应的内容;<br>
                2、导出数据明细,去<el-link type="warning" @click="gopage('/download')">数据下载</el-link>。
              </span>
            </el-card>
          </el-col>
        </div>
        <!--内容-->
        <div class="content">
          <div class="content app-main-content-box">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                v-for="item in tableLableList"
                :key="item.componentId"
                align="center"
                :prop="item.componentId"
                :label="item.componentName"
                width="200"
              >
                <template #default="{row}">
                  <div v-if="isImg(row[item.componentId]&&row[item.componentId][0])">
                    <el-image
                      :src="row[item.componentId][0]||''"
                      style="width: 60px;height:48px"
                      @click="handlePreview(row[item.componentId])"
                    />
                  </div>
                  <div v-else>{{ tableDataforMate(row[item.componentId]) }}</div>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog title="图片预览" :visible.sync="dialogFormVisible" width="550">
              <el-carousel height="680px" autoplay>
                <el-carousel-item v-for="(item,index) in previewList" :key="index" style="text-align:center">
                  <h2 style="text-align:center">{{ index+1 }}</h2>
                  <el-image :src="item" alt="图片预览" style="width: 100%;height: 100%;" :preview-src-list="previewList" />
                </el-carousel-item>
              </el-carousel>
            </el-dialog>
            <!--分页器-->
            <pagination-direction
              v-if="paginationConfig.total!==0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            />
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { fromComponentList, listFromData } from '@/api/marketing'
import { exportLowCodePageRecord } from '@/api/download'
export default {
  data() {
    return {
      params: {
        id: '',
        page: 1,
        pageSize: 10
      },
      /* 分页配置*/
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 导出提示
      dialogVisible: false,
      // 弹窗
      dialogFormVisible: false,
      componentVoList: null,
      previewList: [],
      // 创建时间
      pickerOptions: {},
      src: [],
      url: '',
      srcList: [],
      // 表格
      list: [],
      tableData: [],
      tableLableList: []
    }
  },

  mounted() {
    // 表头接口
    this.getTableLableList().then(() => {
      this.getTableData()
    })
  },

  methods: {
    /**
     * 表头数据请求
     * @params req 请求参数
     */
    async getTableLableList() {
      this.params.id = this.$route.query.page_id
      const { data } = await fromComponentList(this.params)
      this.tableLableList = data
    },
    /**
    * 表格数据请求
    * @params req 请求参数
    */
    async getTableData() {
      this.params.id = this.$route.query.page_id
      const res = await listFromData(this.params)
      const arr = res.data.list.map(item => item.componentValuesList)
      const aliyu = 'https://hyyxboss.oss-cn-shenzhen.aliyuncs.com'
      const filterData = arr.map(item => {
        const obj = {}
        item.forEach(elem => {
          for (const [key, value] of Object.entries(elem)) {
            obj[key] = value
          }
        })
        return obj
      })
      this.tableData = filterData
      this.paginationConfig.total = res.data.total
      this.paginationConfig.page = res.data.pageNum
    },
    tableDataforMate(rowdata) {
      if (!rowdata) return
      return rowdata.slice(' ').join(',')
    },
    /**
     *  点击弹窗图片预览
     */
    handlePreview(imgList = []) {
      this.previewList = imgList
      this.dialogFormVisible = true
    },
    /**
     * 导出数据提示
     */
    downExcel() {
      const data = Object.assign({}, this.params)
      exportLowCodePageRecord(data)
        .then(res => {
          this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'success',
            callback: action => { }
          })
        })
        .catch(() => { })
        .finally(() => { })
    },
    /**
     * 分页sizes改变
     */
    sizesChange(val) {
      this.params.page = 1
      this.params.pageSize = val
      this.getTableData()
    },
    /**
    * 分页page改变
    */
    pageChange(val) {
      this.params.page = val
      this.getTableData()
    },
    /**
     * 跳转下载中心
     */
    gopage(a) {
      this.$router.push(a)
    },
    isImg(url) {
      if (!url) return
      const aliyu = 'https://hyyxboss.oss-cn-shenzhen.aliyuncs.com'
      if (url.indexOf(`${aliyu}`) != -1) return true
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
//头部
.top {
  padding: 24px 30px 125px;
  border-radius: 5px 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .title {
    font-size: 20px;
  }
}

.empty-text {
  line-height: 60px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

//表格背景
.el-card {
  width: 1850px;
  background-color: #fcf6eb !important;

  p {
    font-weight: 700;
  }

  i {
    color: #ffc833;
  }

  span {
    padding-left: 17px;
  }

  .el-link {
    text-decoration: underline;
  }
}

//内容
.content {
  padding: 24px 30px;
  border-radius: 5px;
  background-color: #fff;
}

//表格
.el-table {
  text-align: center;

  .el-button {
    padding: 0 30px 0 20px;
  }
}

.el-image {
  cursor: pointer;
}

.el-image-viewer__canvas {
  width: 50%;
  height: auto;
  object-fit: cover;
}

//分页器
.el-pagination {
  margin-top: 50px;
}
</style>
